<!-- stories/templates/stories/ai_story_generator.html -->
{% extends 'stories/base.html' %}
{% load static %}

{% block title %}AI故事生成 - AI故事生成网站{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>梦笔生花--AI故事生成器</h1>
        <p>创作属于你的独特故事</p>
    </div>

    <div class="story-form-container">
        <form method="post" enctype="multipart/form-data" class="story-form" id="storyForm">
            {% csrf_token %}

            <div class="form-group">
                <label for="id_title">故事标题 *</label>
                {{ form.title }}
                {% if form.title.errors %}
                    <div class="error-message">{{ form.title.errors }}</div>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="id_detailed_description">详细描述 (可选)</label>
                {{ form.detailed_description }}
                <p class="help-text">提供更详细的描述可以帮助AI更精确地生成内容</p>
                {% if form.detailed_description.errors %}
                    <div class="error-message">{{ form.detailed_description.errors }}</div>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="id_category">故事分类 *</label>
                {{ form.category }}
                {% if form.category.errors %}
                    <div class="error-message">{{ form.category.errors }}</div>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="id_cover_image">封面图片 (可选)</label>
                {{ form.cover_image }}
                <p class="help-text">图片可能会裁切，请尽量上传横版图片；如果不上传封面，系统将使用标题文字作为封面</p>
                {% if form.cover_image.errors %}
                    <div class="error-message">{{ form.cover_image.errors }}</div>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="id_content">故事内容 *</label>
                <div class="ai-generation-tools">
                    <div class="ai-controls">
                        <button type="button" id="generateStory" class="btn btn-secondary btn-sm">
                            AI生成故事内容
                        </button>
                        <div class="word-limit-selector">
                            <label>字数限制：</label>
                            <select id="wordLimit" class="form-control" style="display: inline-block; width: auto; margin-left: 10px;">
                                <option value="300">300字</option>
                                <option value="500" selected>500字</option>
                                <option value="1000">1000字</option>
                            </select>
                        </div>
                    </div>
                    <span id="generationStatus" style="margin-left: 10px; color: #666;"></span>
                </div>
                {{ form.content }}
                {% if form.content.errors %}
                    <div class="error-message">{{ form.content.errors }}</div>
                {% endif %}
            </div>

            <div class="form-actions">
                <button type="submit" name="save_draft" class="btn btn-secondary">保存为草稿</button>
                <button type="submit" name="submit_for_review" class="btn btn-primary">提交审核</button>
                <a href="{% url 'stories:home' %}" class="btn btn-default">取消</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 字数统计
    $('#id_content').on('input', function() {
        var count = $(this).val().length;
        if (!$('.char-count').length) {
            $(this).after('<div class="char-count">已输入 ' + count + ' 个字符</div>');
        } else {
            $('.char-count').text('已输入 ' + count + ' 个字符');
        }
    });
    
    // AI生成故事内容
    $('#generateStory').click(function() {
        var title = $('#id_title').val().trim();
        var category = $('#id_category').val();
        var wordLimit = $('#wordLimit').val(); // 获取字数限制
        
        if (!title) {
            alert('请输入故事标题');
            $('#id_title').focus();
            return;
        }
        
        var $button = $(this);
        var originalText = $button.html();
        
        // 显示加载状态
        $button.html('🔄 正在生成...');
        $button.prop('disabled', true);
        $('#generationStatus').text('正在调用AI生成故事内容...');
        
        // 发送AJAX请求
        $.ajax({
            url: '{% url "stories:ai_story_generator" %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
                'action': 'generate',
                'title': title,
                'category': category,
                'word_limit': wordLimit  // 添加字数限制参数
            },
            success: function(response) {
                if (response.success) {
                    $('#id_content').val(response.content);
                    $('#id_content').trigger('input'); // 触发字数统计更新
                    $('#generationStatus').html('<span style="color: green;">✅ AI生成成功！</span>');
                } else {
                    $('#generationStatus').html('<span style="color: red;">❌ 生成失败: ' + response.error + '</span>');
                }
            },
            error: function(xhr, status, error) {
                $('#generationStatus').html('<span style="color: red;">❌ 请求失败: ' + error + '</span>');
            },
            complete: function() {
                // 恢复按钮状态
                $button.html(originalText);
                $button.prop('disabled', false);
                
                // 3秒后清除状态信息
                setTimeout(function() {
                    $('#generationStatus').text('');
                }, 3000);
            }
        });
    });
});
</script>
{% endblock %}